<template>
  <div>
    <p>{{ allCheckedDesc }}</p>
    <label>
      <input type="checkbox" v-model="allChecked" />
      全选
    </label>
    <label v-for="item in arr" :key="item.id">
      <input type="checkbox" v-model="item.checked" />
      {{ item.label }}
    </label>
  </div>
</template>

<script>
export default {
  data: () => ({
    arr: [
      { id: '0', label: 'A', checked: false },
      { id: '1', label: 'B', checked: false },
      { id: '2', label: 'C', checked: false }
    ]
  }),
  computed: {
    // 计算属性
    allCheckedDesc() {
      return this.allChecked ? '已全选' : '未全选'
    },
    // 计算属性 完整写法
    allChecked: {
      get() {
        return this.arr.every(elem => elem.checked)
      },
      set(val) {
        this.arr.forEach(elem => (elem.checked = val))
      }
    }
  }
}
</script>
